/*----------------------------------------*\
  TOP HEADER
\*----------------------------------------*/

.top-header {
  @apply py-3 md:py-4 lg:py-6 xl:py-8 3xl:py-10;
  @apply bg-white;
  @apply text-sm 3xl:text-base;
  @apply border-b;
}

.top-header__mobile-title {
  @apply bg-secondary-100 xs:hidden;
  @apply text-xs;
  @apply relative -top-3;
  @apply overflow-hidden;

  transition: max-height 300ms;

  .container {
    @apply py-2 xs:py-0;
  }

  & br {
    display: none;
  }

  .body--mobile-menu-is-open & {
    @apply max-h-0;
  }
}

.top-header__right {
  @apply flex lg:flex-col lg:items-end;
  @apply lg:-mr-3;
}

.top-header__shopping-cart-button-mobile {
  @apply flex items-center;
  @apply ml-2.5;
  @apply mr-3;
  @screen lg {
    @apply hidden;
  }
}

.top-header__shopping-cart-button-mobile.freebrand {
  @apply !mx-1.5;
}

.top-header__shopping-cart-button-desktop {
  @apply hidden;
  @screen lg {
    @apply block;
    @apply mr-[0.7rem];
    @apply ml-4 xl:ml-2;
  }
}

.top-header__container-flex {
  @apply flex items-center;
}

.icon-header-mobile {
  @apply w-12 h-12;
  @apply rounded-full;
  @apply flex;
  @apply items-center;
  @apply justify-center;

  @screen md {
    @apply hidden;
  }
}

.icon-easy-language {
  @apply bg-green-100;
  svg {
    @apply text-green-800;
  }
}

.icon-sign-language {
  @apply bg-indigo-100;
  svg {
    @apply text-indigo-800;
  }
}
